<template>
  <div>
      <h1 ref="title">我是app.vue</h1>
      <button @click="fn1">获取dom元素</button>

      <!-- v-if就是创建和移除 -->
      <button @click="son2Show=false">移除son2</button>

     <son1 ref="son1" />
     <son2 v-if="son2Show"/>
  </div>
</template>

<script>
import son1 from './components/son1'
import son2 from './components/son2'
export default {
  components: {son1, son2},

  data() {
    return {
      son2Show: true,
    };
  },

  methods: {

    fn1 () {

      // 打印一下
      // console.log( this.$refs.title )
      // vue里不推荐通过dom元素修改界面
      // 我这里这么演示只是为了让你明白这里果然找到了这个dom对象
      // this.$refs.title.innerText = '我修改'

      // 找到son1组件对象
      // 也就是相当于是son1内部的this
      console.log(this.$refs.son1)
      // 有一个非官方推荐，但是开发又常用的技巧
      // 通过这样的形式实现父传子
      this.$refs.son1.list.push(999)
      this.$refs.son1.sayHi() // 也能调用子组件里的方法
    }
  }
}
</script>

<style>

</style>